<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <!-- 顶部导航栏 -->
        <navbar style="border-bottom: 1px solid #eee">
          <template v-slot:left>
            <img
                :src="configZiduan?.logo?.startsWith('http') ? configZiduan.logo : `${this.$NuoYiUrl}${configZiduan.logo}`"
                alt="logo" id="logo" @click="rehome"/>
          </template>
          <template v-slot:default>
            <!--            {{$store.state.isChinese ? 'Russian' : 'Chinese' }}-->
            <span @click="toggleLanguage">{{ currentLanguage }}</span>
          </template>
          <template v-slot:right>
            <div>
              <!-- 点击时候转换图标，并弹出菜单 -->
              <i :class="iconClass" @click="menu"></i>
            </div>
          </template>
        </navbar>
        <div class="menu-container" :class="{ show: isMenuVisible }">
          <el-col :span="12" style="max-width: 100%">
            <el-menu
                :default-active="activeIndex"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                style="width: 100%"
                :router="true"
            >
              <template v-for="item in Menu" :key="item.id">
                <el-sub-menu v-if="item.children && item.children.length" :index="item.router">
                  <template #title>
                    <span>{{ $store.state.isChinese ? item.nameCn : item.nameRa }}</span>
                  </template>
                  <template v-for="subItem in item.children" :key="subItem.id">
                    <el-sub-menu v-if="subItem.children && subItem.children.length" :index="subItem.router">
                      <template #title>
                        <span>{{ $store.state.isChinese ? subItem.nameCn : subItem.nameRa }}</span>
                      </template>
                      <template v-for="subSubItem in subItem.children" :key="subSubItem.id">
                        <el-menu-item :index="subSubItem.router" class="item">
                          <div @click="menu" style="width: 100%; text-align: left">
                            {{ $store.state.isChinese ? subSubItem.nameCn : subSubItem.nameRa }}
                          </div>
                        </el-menu-item>
                      </template>
                    </el-sub-menu>
                    <el-menu-item v-else :index="subItem.router">
                      <div @click="menu" style="width: 100%; text-align: left">
                        {{ $store.state.isChinese ? subItem.nameCn : subItem.nameRa }}
                      </div>
                    </el-menu-item>
                  </template>
                </el-sub-menu>
                <el-menu-item v-else :index="item.router">
                  <router-link :to="item.router" @click="menu" style="width: 100%; text-align: left">
                    {{ $store.state.isChinese ? item.nameCn : item.nameRa }}
                  </router-link>
                </el-menu-item>
              </template>
            </el-menu>
          </el-col>


        </div>
      </el-header>
      <!-- 主体内容 -->
      <el-main v-if="!isLoading">
                <router-view v-slot="{ Component }">
                  <keep-alive include="case,new">
                    <component :is="Component"></component>
                  </keep-alive>
                </router-view>

      </el-main>
      <el-main v-else>
        <div class="loading">
          <el-loading :fullscreen="true" :target="null" :body-style="{ background: 'rgba(0, 0, 0, 0.1)' }">
            <!--加载效果-->
            <div class="loader"  v-loading="loading" element-loading-text="Loading...">
              <svg class="circular" viewBox="25 25 50 50">
                <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
              </svg>
            </div>
          </el-loading>
        </div>
      </el-main>
      <!-- 底部版权信息 -->
      <!--      判断是否为/news页面，如果是，则不显示底部版权信息-->
      <el-footer
          v-if="!$route.path.includes('/new') && !$route.path.includes('/case') && !$route.path.includes('/jdalxq')"
      >
        <div class="max-1200">
          <div class="form-group">
            <div class="form-up">
              <div class="form-up-title">{{ $store.state.isChinese ? '快速物流' : 'быстрая логистика' }}</div>
            </div>
            <div class="sub">
              <p>{{ $store.state.isChinese ? '马上联系我们' : 'немедленно свяжитесь с нами' }}</p>
            </div>
            <div class="form-down">
              <el-form ref="form" :model="form" label-width="100px" :rules="rules"
                       @submit.native.prevent="handleSubmit">
                <el-form-item prop="usename">
                  <el-input
                      class="el-input1"
                      v-model="form.usename"
                      style="width: 100%"
                      :placeholder="$store.state.isChinese?'请输入您的姓名':'введите ваше имя'"

                  />
                </el-form-item>
                <el-form-item prop="phone">
                  <el-input
                      class="el-input2"
                      v-model="form.phone"
                      style="width: 100%"
                      :placeholder="$store.state.isChinese?'请输入您的联系电话':'контактный телефон'"

                      prop="phone"
                  />
                </el-form-item>
                <el-form-item prop="content">
                  <el-input
                      class="result"
                      id="jieguo1"
                      v-model="form.content"
                      type="textarea"

                      :placeholder="$store.state.isChinese?'备注留言':'комментарий или сообщение'"
                  />
                </el-form-item>

                <el-button
                    native-type="submit"
                    style="width: 100%; margin-top: 15px; background: linear-gradient(to right,#f6321e,#f08816); color: white;"
                >{{ $store.state.isChinese ? '提交' : 'отправить' }}
                </el-button
                >
              </el-form>
            </div>
          </div>
          <div
              class="center"
              style="
              padding: 20px;
              text-align: left;
              background-color: beige;
              height: auto;
              border-radius: 10px;
              margin-bottom: 10px;
              font-size: 14px;
            "
          >
            <div style="width: 100%">
              <div style="display: flex; align-items: stretch; width: 100%;">
                <p
                    style="
                  width: 40%;
                  float: left;
                  background: linear-gradient(to right, red, blue);
                  -webkit-background-clip: text;
                  color: transparent;
                   margin: 0;
                "
                >
                  {{ $store.state.isChinese ? '公司宣传语:' : 'компания в соцсетях:' }}
                </p>
                <div
                    style="
                   width: 60%;
                  height: auto;
                  background: linear-gradient(to right, red, blue);
                  -webkit-background-clip: text;
                  color: transparent;
                "
                >

                  {{ $store.state.isChinese ? this.configZiduan.gsxcyCn : this.configZiduan.gsxcyRa }}
                </div>
              </div>
            </div>
            <div style="width: 100%;margin-top: 20px;">
              <p style="
                  text-align: left;
                  background: linear-gradient(to right, red, blue);
                  -webkit-background-clip: text;
                  color: transparent;
                  height: 60px;
                  width: 40%;
                  float: left;
                ">
                {{ $store.state.isChinese ? '公司联系方式:' : 'TEL:' }}
              </p>
              <div style="
                  width: 100%;
                  height: 60px;
                  background: linear-gradient(to right, red, blue);
                  -webkit-background-clip: text;
                  color: transparent;
                ">
                {{ this.configZiduan.phone }}
              </div>
            </div>
          </div>
          <div class="foot">
            <div class="foot-left" v-if="$store.state.isChinese">
              <!-- <img src="../assets/img/LOGO.jpg" alt="logo" id="logo1" /> -->
              <div class="foot-link">
                <a href="">公司业务</a>| <a href="">新闻公告</a>|<a href=""
              >公司简介</a
              >| <a href="">特色服务</a>| <a href="">展会专线</a>|<a href=""
              >经典案例</a
              >
              </div>
            </div>
            <div class="foot-right">
              <div class="foot-right-up">
                <div
                    class="canpyname"
                    style="font-size: 9px; width: 100%; margin-left: -10px"
                >
                  {{ $store.state.isChinese ? '企业电话:' : 'TEL' }}：{{ this.configZiduan.phone }}
                  <span style="width: 9px; font-size: 9px; margin-left: 10px"
                  >{{ $store.state.isChinese ? '企业网址' : 'Website' }}:</span
                  >
                  <a href="">www.fsdgz.cn</a>
                </div>
              </div>
              <div class="tel" style="font-size: 9px; width: 100%">
                {{ $store.state.isChinese ? '企业名称：广州风速达货运代理有限公司' : 'Name:FengSuDa-компания' }}
              </div>
              <div style="font-size: 9px">
                {{ $store.state.isChinese ? '公司地址' : 'Adress' }}：{{ $store.state.isChinese ? this.configZiduan.address : 'Room 103, No. 25, Third Street, Gaoqiao Road, Songzhou Street, Baiyun District, Guangzhou City' }}
              </div>
              <div class="foot-right-down">
                <div
                    class="foot-right-down"
                    style="display: flex; align-items: center; width: 100%"
                >
                  <div
                      class="email1"
                      style="font-size: 9px; width: 100%; margin-right: 10px"
                  >
                    {{ $store.state.isChinese ? '企业邮箱' : 'E-mail' }}：blackjack2831@126.com
                  </div>
                  <!-- 第三方跳转图标-->
                  <!--                  <div class="u-flex" style="display: flex; width: 105px">
                                      <a href="">
                                        <img
                                            src="https://esudagz.com/template/web/default/skin/img/image/CgAGe1pV75-AZXwtAAAEDLvpyp0791.png"
                                            alt=""
                                        />
                                      </a>
                                      <a href="">
                                        <img
                                            src="https://esudagz.com/template/web/default/skin/img/image/CgAGe1pV75SAIp4QAAAE4JFWTHA154.png"
                                            alt=""
                                        />
                                      </a>
                                      <a href="">
                                        <img
                                            src="https://esudagz.com/template/web/default/skin/img/image/CgAGe1pV7_aAbHMzAAADrk_0fE0735.png"
                                            alt=""
                                        />
                                      </a>
                                    </div>-->
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-footer>
      <!-- 右侧滑块-->
      <div id="slider" ref="slider" class="slider">
        <a href="javascript:;" class="arrow" @click="toggleSlider" @touchstart="handleTouchStart">
          <i
              :class="
              isSliderVisible
                ? 'iconfont icon-arrow-drop-right-line'
                : 'iconfont icon-arrow-drop-left-line'
            "
              class="arrow-icon"
          ></i>
        </a>
        <div class="slider-content" v-show="isSliderVisible">
          <a href="javascript:;" class="item">
            <img
                src="https://esudagz.com/template/web/default/skin/img/image/telephone.png"
                alt=""
                class="ic"
            />
            <div class="name">{{ $store.state.isChinese ? '电话' : 'Tel' }}</div>
            <div class="child u-flex">
              <img
                  src="https://esudagz.com/template/web/default/skin/img/image/xn_m_2_tel_tel.png"
                  alt=""
                  class="ic"
              />{{ this.configZiduan.phone }}
            </div>
          </a>
          <a href="javascript:;" class="item">
            <img
                src="https://esudagz.com/template/web/default/skin/img/image/code.png"
                alt=""
                class="ic"
            />
            <div class="name">{{ $store.state.isChinese ? '微信' : 'WeChat' }}</div>
            <div class="child code">
              <img
                  src="../assets/img/Wechat.jpg"
                  alt=""
                  class="w-100"
              />
            </div>
          </a>
          <a href="javascript:;" @click="scrollToTop" class="item">
            <img
                src="https://esudagz.com/template/web/default/skin/img/image/top.png"
                alt=""
                class="ic"
            />
            <div class="name">{{ $store.state.isChinese ? '返回' : 'Top' }}</div>
          </a>
        </div>
      </div>
    </el-container>
  </div>
</template>

<script>
import navbar from "@/nav/navbar.vue";
import "../assets/css/homeview.css";
import {ElMessage} from "element-plus";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";

export default {
  name: "home",
  data() {
    return {
      loading: true,
      Component: '',
      isLoading: true, // 新增loading状态
      isDragging: false, // 是否正在拖动
      startY: 0, // 触摸开始时的Y坐标
      startTop: 500, // 滑块初始的top值
      maxTop: 0, // 滑块可以移动的最大top值
      minTop: 145, // 滑块可以移动的最小top值，距离顶部145px
      isChinese: true,
      // 初始化状态，默认为详情图标
      isMenuOpen: false,
      isSliderVisible: false,
      code: "",
      form: {
        usename: "",
        phone: "",
        content: "",
      },
      Menu: [],
      configZiduan: {},
      rules: {
        usename: [{required: true, message: "姓名不能为空", trigger: "blur"}, {
          min: 3,
          max: 10,
          message: "姓名长度应在 3 到 10 位之间",
          trigger: "blur",
        },],
        phone: [{
          required: true,
          message: "请输入手机号码",
          trigger: "blur",
        },
          {
            min: 11,
            max: 11,
            message: "手机号码不符合",
            trigger: "blur",
          },
          {
            pattern: /^[1][3-9][0-9]{9}$/,
            message: "手机号码格式不正确",
            trigger: "blur",
          },],
        content: [
          {
            required: true,
            message: "请输入留言",
            trigger: "blur",
          },
        ]
      }
    };
  },
  computed: {
    // 根据状态返回图标类名
    iconClass() {
      return this.isMenuOpen
          ? "iconfont icon-guanbi"
          : "iconfont icon-xiangqing";
    },
    // 控制菜单容器的显示状态
    isMenuVisible() {
      return this.isMenuOpen; // 当isMenuOpen为true时，显示菜单容器
    },
    // 计算属性，自动将 Vuex 状态映射为响应式
    currentLanguage() {
      return this.$store.state.isChinese ? 'Russian' : 'Chinese';
    },
    activeIndex() {
      return this.$route.path;
    }
  },
  components: {
    navbar,
  },
  watch: {
    '$route': function (to, from) {
      // 当路由变化时，触发相应的操作
      this.navMenu();
    }
  },
  beforeUnmount() {
    // 移除触摸事件监听器
    this.$refs.slider.removeEventListener('touchstart', this.handleTouchStart);
    this.$refs.slider.removeEventListener('touchmove', this.handleTouchMove);
    this.$refs.slider.removeEventListener('touchend', this.handleTouchEnd);
  },
  mounted() {
    // 导航栏路由
    this.navMenu();
    // 获取配置动态字段信息
    this.getConfig();
    // 滑块初始化最大top值
    this.maxTop = window.innerHeight - 87.5;
    // 添加触摸事件监听器
    this.$refs.slider.addEventListener('touchstart', this.handleTouchStart);
    this.$refs.slider.addEventListener('touchmove', this.handleTouchMove);
    this.$refs.slider.addEventListener('touchend', this.handleTouchEnd);
  },
  methods: {
    // 触摸开始事件
    handleTouchStart(event) {
      this.isDragging = true;
      this.startY = event.touches[0].clientY;
      this.startTop = parseFloat(window.getComputedStyle(this.$refs.slider).top);
      // 更新最大top值
      this.maxTop = window.innerHeight - 87.5;
    },
    // 触摸移动事件
    handleTouchMove(event) {
      if (this.isDragging) {
        const diff = event.touches[0].clientY - this.startY;
        let newTop = this.startTop + diff;

        // 限制滑块的移动范围
        newTop = Math.min(Math.max(newTop, this.minTop), this.maxTop);

        this.$refs.slider.style.top = `${newTop}px`;
        event.preventDefault(); // 阻止默认的触摸行为，如页面滚动
      }
    },
    // 触摸结束事件
    handleTouchEnd() {
      this.isDragging = false;
    },
    /* 返回顶部 */
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },
    toggleSlider() {
      this.isSliderVisible = !this.isSliderVisible;
    },
    menu() {
      // 切换状态
      this.isMenuOpen = !this.isMenuOpen;
    },
    rehome() {
      if (this.isMenuOpen) {
        this.menu();
      }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },

    /* 导航接口 */
    async navMenu() {
      const {data: res} = await this.$http.get(
          "/navMenu/listNavMenu"
      );
      console.log("导航接口：", res);
      if (res.code === 200) {
        this.Menu = res.navList;
      }
    },
    /*校验后调用留言*/
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单校验通过，执行提交操作
          this.message();
        } else {
          // 表单校验失败，提示用户
          this.$message.error({
            message: '请输入完整表单内容',
            offset: 100 // 设置偏移量
          });
          return false;
        }
      });
    },
    /* 留言 */
    async message() {
      const {data: res} = await this.$http.post(
          "/comments/saveComments",
          this.form
      );
      console.log("留言接口：" + res);
      if (res.code === 200) {
        this.$message.success({
          message: '留言成功',
          offset: 100 // 设置偏移量
        })
        console.log(ElMessage, "ElMessage")
        this.form.usename = "";
        this.form.phone = "";
        this.form.content = "";
      } else {
        ElMessage.error(res.msg);
      }
    },
    /*config动态字段*/
    async getConfig() {
      const {data: res} = await this.$http.get(
          "/configs/findOneConfigs"
      );
      console.log("配置动态字段：", res);
      if (res.code === 200) {
        this.configZiduan = res.list[0];
        //存进本地缓存
        localStorage.setItem('configZiduan', JSON.stringify(this.configZiduan));
        this.isLoading = false; // 加载完成
      }
      console.log("动态字段", this.configZiduan);
    },
    /* 切换语言 */
    toggleLanguage() {
      // 提交 mutation 来切换语言
      this.$store.commit('setLanguage', !this.$store.state.isChinese);
      // console.log("切换语言前：",this.$store.state.isChinese);
      // this.$store.state.isChinese =!this.$store.state.isChinese;
      // console.log("切换语言后：",this.$store.state.isChinese);
      // this.$store.state.isChinese = !this.$store.state.isChinese;
      // console.log("切换语言：",this.$store.state.isChinese);
    },
  },
};
</script>
